<template>
	<view class="nav-box" :style="{'height':height+'px','background':bgColor}">
		<!-- 自定义导航栏 -->
		<view class="status_bar" :style="{'height':statusBarHeight+'px'}">
			<!-- uni-ui这里是状态栏 -->
		</view>
		<!-- 胶囊位置信息 -->
		<view class="nav-main" :style="{height: navBarHeight+'px'}">
			<view class="nav-main-back" @click="back" v-if="backIcon">
				<image class="back-class" type="back" src="@/static/back-white.png" v-if="backIconColor=='white'">
				</image>
				<image class="back-class" type="back" src='@/static/back-black.png' v-else></image>
			</view>
			<view class="title-class-box">
				<text @tap="navClicktitle(1)" :class="temp==1?title2!==''?'nav-main-title-selected':'nav-main-title-selected':'nav-main-title'"
					v-if="title1==''?false:true" :style="{'color':titleColor}">{{title1}}</text>
				<text @tap="navClicktitle(2)" :class="temp==2?title1!==''?'nav-main-title-selected':'nav-main-title-selected':'nav-main-title'"
					v-if="title2==''?false:true" :style="{'color':titleColor}">{{title2}}</text>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			bgColor: {
				type: String,
				default: "#F5F5F5"
			},
			backIcon: {
				type: Boolean,
				default: true
			},
			/***
			 *color: white; 设置white的时候 返回图标显示白色
			 *color: black; 设置非white的时候 返回图标显示黑色
			 ***/
			backIconColor: {
				type: String,
				default: 'white'
			},
			title1: {
				type: String,
				default: ""
			},
			title2: {
				type: String,
				default: ""
			},
			titleColor: {
				type: String,
				default: "#FFF"
			},
			isShare:{
				type: Boolean,
				default: false
			}
		},
		name: "customNav",
		data() {
			return {
				statusBarHeight: 0,
				navBarHeight: 0,
				height: 0,
				temp: 1
			};
		},
		created() {
			// #ifdef MP
			this.$utils.log("进入小程序获取高度的方法")
			this.$utils.toastDebug('进入小程序获取高度的方法')
			this.getHeightMP()
			// #endif
			// #ifdef APP-PLUS
			this.$utils.log("进入APP获取高度的方法")
			this.$utils.toastDebug('进入APP获取高度的方法')
			this.getHeightAPP()
			// #endif
			// #ifdef H5
			this.$utils.log("进入H5获取高度的方法")
			this.$utils.toastDebug('进入H5获取高度的方法')
			this.getHeightH5()
			// #endif
		},
		methods: {

			// #ifdef MP
			//获取屏幕导航栏高度
			getHeightMP() {
				if (wx.canIUse('getMenuButtonBoundingClientRect')) {
					this.$utils.log("进入getHeightMP正常获取高度的方法")
					let sysInfo = wx.getSystemInfoSync(); //状态栏的高度
					this.statusBarHeight = sysInfo.statusBarHeight;
					// 胶囊位置信息
					let rect = wx.getMenuButtonBoundingClientRect();
					this.menuButtonRect = JSON.parse(JSON.stringify(rect));
					// 导航栏高度
					let navBarHeight = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
					this.navBarHeight = navBarHeight;
					// 自定义导航栏的高度
					this.height = sysInfo.statusBarHeight + navBarHeight;
				} else {
					this.$utils.log("您的微信版本过低，界面可能会显示不正常")
					this.$utils.toastRelease('您的微信版本过低，界面可能会显示不正常', 4000)
				}
			},
			// #endif

			// #ifdef APP-PLUS
			//获取屏幕导航栏高度
			getHeightAPP() {
				this.statusBarHeight = 25 ;
				this.navBarHeight = 25 * 2;
				this.height =  25 * 3;
			},
			// #endif

			// #ifdef H5
			//获取屏幕导航栏高度
			getHeightH5() {
				this.statusBarHeight = 0;
				this.navBarHeight = 25 * 2;
				this.height = 25 * 2;
			},
			// #endif
			//返回
			back() {
				this.$emit('shareBack')
				uni.navigateBack({
					delta: 1
				})
			},
			//点击自定义导航栏title
			navClicktitle(inta) {
				this.$emit("clickTitle", inta)
				this.temp = inta
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		// height: var(--status-bar-height);
		width: 100%;
	}

	.nav-main {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		align-items: center;

		.nav-main-back {
			position: absolute;
			left: 20rpx;
		}

		.nav-main-title {
			font-family: PingFang SC;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 0rpx;
			color: #FFFFFF;
			opacity: .5;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}

		.nav-main-title-selected {
			font-size: 36rpx;
			line-height: 0rpx;
			font-weight: bold;
			color: #FFFFFF;
			opacity: 1;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}
	}

	.back-class {
		width: 34rpx;
		height: 34rpx;
	}
</style>